<script setup>
import Toast from '@vant/weapp/dist/toast/toast';
import newLoading from '@/components/newLoading/index.vue';


import { ref } from 'vue';

const queryData = ref({
    img: ''
})

const loading = ref(false);
const loadingRef = ref(null)


function createFn() {
    loading.value = true
    setTimeout(() => {
        loadingRef.value.completeLoading().then(() => {
            Toast.success({
                message: '生成成功',
                onClose() {
                    uni.navigateTo({
                        url: `/draw/oldPhotoRestoration/detail/index?img=${queryData.value.img}`
                    })
                }
            })
        })
    }, 10000);
}
</script>

<template>
    <div class='dancePersonDraw'>
        <NavBar>舞动人像</NavBar>
        <div class="container">
            <div class="img_box">
                <img src="" alt="" class="imgSty" mode="aspectFit" @click="previewImageFn(defaultImg)">
            </div>
            <div class="content">
                <div class="label">来财来财</div>
                <div class="text">时长：00:12 </div>
            </div>
        </div>

        <div class="footer">
            <div class="footer_placeholder"></div>
            <div class="footer_content">
                <div class="create_btn" @click="createFn">
                    <div class="create_btn_title">保存视频</div>
                </div>
            </div>
        </div>
    </div>
    <newLoading ref="loadingRef" v-model="loading" :duration="10000" :label="['排队中，预计等待大于5分钟']"></newLoading>
    <van-toast id="van-toast" />
</template>

<style lang='scss' scoped>
.dancePersonDraw {
    height: 100vh;
    display: flex;
    flex-direction: column;

    .container {
        box-sizing: border-box;
        flex: 1;
        padding: 30rpx;
        display: flex;
        flex-direction: column;

        .img_box {
            // flex: 1;
            height: 65vh;
            border-radius: 20rpx;
            background-color: var(--a-main-box-bg-color);
            position: relative;

            .imgSty {
                width: 100%;
                height: 100%;
            }
        }

        .content {
            margin-top: 28rpx;

            .label {
                font-size: 28rpx;
                font-weight: bold;
                color: var(--a-one-text-color);
            }

            .text {
                font-size: 24rpx;
                color: var(--a-two-text-color);
                margin-top: 5rpx;
            }
        }
    }

    .footer {
        .footer_placeholder {
            height: 176rpx;
        }

        .footer_content {
            box-sizing: border-box;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 176rpx;
            background: #212142;
            padding: 28rpx 30rpx 0;

            .create_btn {
                height: 86rpx;
                background: var(--a-main-color);
                border-radius: 44rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .create_btn_title {
                    font-size: 32rpx;
                    color: var(--a-one-text-color);
                }

                .create_btn_label {
                    font-size: 20rpx;
                    color: var(--a-one-text-color);
                }
            }
        }
    }
}
</style>